<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.col{
				color: skyblue;
				font-size: 30px;
				transition: 1s;
			}
			img{
				width: 200px;
				height: auto;
			}
			/**
			 * img标签里面设置的宽高一般
			 * 用来设置图片的真是宽高，
			 * 展示宽高用css写。
			 * 
			 * */
		</style>
	</head>
	<body>
		<div class="test">我是div1</div>
		<div class="test" id="two">我是div2</div>
		<div class="test">我是div3</div>
		<img src="img/1.jpg" alt="美少女" width="100" height="200"/>
		<img src="img/2.jpg"/>
		<script type="text/javascript">
			/**
			 * DOM(document object model)，文档对象模型
			 * 	DOM把html文档分为一个个节点
			 * 	1、元素:叫做元素节点
			 * 	2、属性:叫做属性节点
			 * 	3、文本:叫做文本节点
			 * 	4、注释:叫做注释节点
			 * 
			 * 
			 * 一、document对象
			 * 	当html文档载入浏览器的时候，会把html文档
			 * 	自动添加到document对象下。
			 * 
			 * 方法和属性：
			 * */
			document.write("输出内容到html文档中");
			//writeln之间有空格，writeln后面会添加一个换行符，只是没显示。
			document.writeln("输出内容到html文档中且在内容的末端会留有空格");
			document.writeln("输出内容到html文档中");
			
			
			/**
			 * 1、document.querySelector(n)
			 * n:代表css的选择器
			 * 用来获取到具有该选择器的第一个元素
			 * 如果选择有多个同样选择器的元素时，只能获取到第一个具有该选择器的元素。
			 * 
			 * 2、document.querySelectorAll(n)
			 * n:代表css的选择器
			 * 用来获取到所有具有该选择器的元素，返回一个节点列表(类数组)。
			 * 要获取节点列表里面的元素，可以通过数组获取元素的方法：document.querySelectorAll(n)[1]
			 * 
			 * 3、document.getElementsByTagName(elementName);
			 * element:代表传入的标签名
			 * 可以通过标签名来获取到所有具有该标签名的元素，返回值是一个html集合组。
			 * 
			 * 4、getElementsByClassName(className)
			 * className:代表类名
			 * 获取到所有具有该类名的元素，返回值是一个html集合组。
			 * 
			 * 5、getElementById(idName)
			 * idName:代表id名
			 * 用来获取具有该id名的元素，返回值就是该元素。
			 * 
			 * 用querySelector和get~方法来获取元素的区别
			 * 1、性能不一样
			 * get~方法比query~方法好
			 * 2、query~静态获取元素
			 * 	  get~动态获取元素
			 * 
			 * */
			
			//1、document.querySelector(n)
			var test = document.querySelector("div:first-child");
			console.log(test);
			
			//2、document.querySelectorAll(n)
			var allTest = document.querySelectorAll("div");//NodeList(3) [div.test, div.test, div.test]
			console.log(allTest);
			var allTest = document.querySelectorAll("div")[1];//<div class="test">我是div2</div>
			console.log(allTest);
			
			//3、document.getElementsByTagName(elementName)
			var allTarget = document.getElementsByTagName("div");
			console.log(allTarget);
			
			//4、getElementsByClassName(className)
			var ele = document.getElementsByClassName("test");
			console.log(ele);
			console.log(ele[0]);
			
			//5、getElementById(idName)
			var two = document.getElementById("two");
			console.log(two);
			
			
			
			/**
			 * 添加监听事件(添加事件句柄)
			 * document.addEventListener(event,callback);
			 * event:代表我们需要添加的事件类型，比如单击事件(click)，双击事件(dblclick)...
			 * callback:代表回调函数，就是我们需要做的事情都定义在该函数里面
			 * */
			document.addEventListener("click",function(){
				alert("未成年人请在父母陪同下观看！");
			})
			
			
			/**
			 * 创建元素
			 * document.createElement(elName)
			 * elName:代表需要创建的标签名
			 * 
			 * 添加元素
			 * parent.appendChild(child)
			 * 	parent:代表需要添加元素的父级元素
			 * 	child:代表我们创建的元素/文本
			 * 
			 * 创建一个文本节点
			 * document.creatTextNode(str);
			 * str:代表我们需要填入的内容。
			 * */
			var p = document.createElement("p");
			var txt1 = document.createTextNode("我是通过文本节点创建出来的内容");
			var txt2 = document.createTextNode("我是另一个文本");
			two.appendChild(p);
			var isClick = true;
			two.addEventListener("click",function(){
				if(isClick){
					p.appendChild(txt1);
				}else{
					p.appendChild(txt2);
				}
				//取反，意思是把原来正确的变为错误的，把错误的变为正确的
				//结果为布尔值
				isClick = !isClick;
			})
			
			
			/**
			 * innerText
			 * 向元素添加文本内容，再次添加内容的时候会覆盖掉原来的内容
			 * 
			 * 区别：
			 * innerText不能识别标签
			 * innerHTML可以识别标签
			 * 
			 * */
			var h1 = document.createElement("h1");
			h1.innerText = "我是通过innerText添加的文本";
			console.log(document.body);
			document.body.appendChild(h1);
			h1.addEventListener("click",function(){
				if(isClick){
					h1.innerText = "我是点击进来的内容！"
				}else{
					h1.innerText = "我是通过innerText添加的文本";
				}
				isClick = !isClick;
				
			})
			
			
			var h2 = document.createElement("h2");
			document.body.appendChild(h2);
			h2.innerHTML = "我是通过innerHTML添加进来的";
			h2.innerHTML = "<a>再次添加内容，测试是否会覆盖</a>"
			
			
			/**
			 * 创建属性节点
			 * document.createAttribute(attr)
			 * attr:代表我们创建的属性名
			 * 
			 * 通过value给属性节点赋值，例如：clname.value
			 * 
			 * 给元素添加属性节点
			 * setAttributeNode(attrName)
			 * attrName:代表我们创建的属性节点名
			 * */
			var clName = document.createAttribute("class");
			clName.value = "h2";
			h2.setAttributeNode(clName);
			
			h2.addEventListener("click",function(){
				clName.value = "col";
			})
			
			//document.documentElement返回文档根节点
			console.log(document.documentElement);
			
			
			/**
			 * 获取所有img标签
			 * 	document.images
			 * 
			 * */
			var imgs = document.images;
			console.log(imgs[0].src);
			
			//点击切换图片
			imgs[0].addEventListener("click",function(){
				if(isClick){
					imgs[0].src = "img/timg.jpg";
				}else{
					imgs[0].src = "img/1.jpg";
				}
				isClick = !isClick;
			})
			
			/**
			 * 移除事件句柄
			 * document.removeEventListener(event,callback);
			 * 和添加事件句柄的参数一样
			 * 
			 * 
			 * */
			document.addEventListener("click",myFun)
			function myFun(){
				console.log("添加事件监听");
			}
				document.removeEventListener("click",myFun);
		</script>
	</body>
</html>
